<template>
  <div class="activity-item">
    <template v-for="(field, index) in fieldsMap[itemData.activityType]">
      <flexbox
        v-if="getShow(field)"
        :key="index"
        :gutter="0"
        align="flex-start"
        justify="flex-start"
        class="row-item">
        <span>{{ getLabel(field) }}：</span>

        <flexbox-item
          v-if="[
            'products'
          ].includes(field.fieldName)">
          <template v-if="getContent(field).length">
            <div
              v-for="(child, childIndex) in getContent(field)"
              :key="childIndex"
              :class="{ 'special': !!field.type }"
              @click="handleClick(field.type, child.id)">
              {{ child.name }}
            </div>
          </template>
        </flexbox-item>

        <flexbox-item v-else>
          <span
            v-if="field.type && !field.disabled"
            class="special"
            @click="handleClick(field.type, field.idField ? contentData[field.idField] : null)">
            {{ getContent(field) }}
          </span>
          <span v-else-if="field.fieldName === 'ownerUser'">
            <wx-open-data :openid="getContent(field)" />
          </span>
          <span v-else>{{ getContent(field) }}</span>

          <el-tag
            v-if="field.fieldName === 'name' && contentData.hasOwnProperty('checkStatus')"
            :style="{
              color: getStatusColor(contentData.checkStatus)
            }"
            :color="getBgColor(contentData.checkStatus)"
            class="examine-status">
            {{ getStatusName(contentData.checkStatus) }}
          </el-tag>
        </flexbox-item>
      </flexbox>
    </template>
  </div>
</template>

<script>
import CheckStatusMixin from '@/mixins/CheckStatusMixin'
import { convertHexByOpacity } from '@/utils'
import { isObject } from '@/utils/types'

export default {
  name: 'ActivityItem',
  mixins: [CheckStatusMixin],
  props: {
    itemData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      fieldsMap: {
        // 线索
        1: [
          { fieldName: 'name', name: this.$t('crm.components.6b6907f218223bdb3dc7737048681e49'), type: 'leads' }
        ],
        // 客户
        2: [
          { fieldName: 'name', name: this.$t('crm.components.f2776b62f7eb890b1bf206b0d1cf7828'), type: 'customer' },
          { fieldName: 'industry', name: this.$t('crm.components.21076f9e435b6c7e9041ddc354da9c9f') },
          { fieldName: 'level', name: this.$t('crm.components.498ecbcd034bfc3404bedbfd754651f4') }
        ],
        // 联系人
        3: [
          { fieldName: 'name', name: this.$t('crm.components.6999de15ade701e992a3f030ebab8a72'), type: 'contacts' },
          { fieldName: 'post', name: this.$t('crm.components.5c387d68cd510c3c963727ac1aea879f') },
          { fieldName: 'mobile', name: this.$t('crm.components.be07a85a98e54d6a178567a4783e0f2a') }
        ],
        // 产品
        4: [
          { fieldName: 'name', name: this.$t('crm.components.6eb3561a64cef4fe027b50c131d25531'), type: 'product' }
        ],
        // 商机
        5: [
          { fieldName: 'name', name: this.$t('crm.components.d8ca5531828a440eb5a86404009d45fb'), type: 'business' },
          { fieldName: 'money', name: this.$t('crm.components.4a38139e71261df8489bf7ad556af768') },
          { fieldName: 'flowName', name: this.$t('crm.components.73c3862577bc054bdaaea9d31e59e94e') },
          { fieldName: 'products', name: this.$t('crm.components.d43ab8f23f1613015114064baf179d7c'), type: 'product' }
        ],
        // 合同
        6: [
          { fieldName: 'name', name: this.$t('crm.components.746245d6ffe00aaf24eca5ac4b64ffa3'), type: 'contract' },
          { fieldName: 'num', name: this.$t('crm.components.722929fe8ad1896dec74491262530ad7') },
          { fieldName: 'money', name: this.$t('crm.components.e18366d87b99a1cbba9dedcf711d70ca') },
          { fieldName: 'timeLine', name: this.$t('crm.components.f530144aeb86b07d722ab156c651bd39') }
        ],
        // 回款
        7: [
          { fieldName: 'name', name: this.$t('crm.components.4f0c1014e3d293974732dac59f784a73'), type: 'receivables' },
          { fieldName: 'contractNum', name: this.$t('crm.components.c12ddc2cf79c69cf471b64c499404629'), type: 'contract', idField: 'contractId' },
          { fieldName: 'num', name: this.$t('crm.components.ff47d868810797003b8c4c9b00f7ad4b') },
          { fieldName: 'money', name: this.$t('crm.components.331aa490e12f1456434306dc9b2b3b43') },
          { fieldName: 'returnTime', name: this.$t('crm.components.9c5c43af2b66fe68d8b606535ace727c') }
        ],
        // 日志
        8: [
          { fieldName: 'name', name: this.$t('crm.components.ad46d373211df94fda37e799e961b52a'), type: 'log' },
          { fieldName: 'content', name: this.$t('crm.components.ebd9017a8b83e6eebde24fbbba658bbb') }
        ],
        // 审批
        9: [
          { fieldName: 'name', name: this.$t('crm.components.2f433ce699850105a51bc751a2b65258'), type: 'examine' },
          { fieldName: 'type', name: this.$t('crm.components.6e229e5040febd7026230f910b049ddd') },
          { fieldName: 'content', name: '' },
          { fieldName: 'endAddress', name: this.$t('crm.components.c011c9943d5392addac97624230cdc9a') },
          { fieldName: 'duration', name: this.$t('crm.components.bd11c818375ea1ddf88d4c473b9a638b') },
          { fieldName: 'timeLine', name: this.$t('crm.components.48d923b53257c2b5fb14d16c57915b62') }
        ],
        // 日程
        10: [
          { fieldName: 'name', name: this.$t('crm.components.855eee45b8628e9e3b21a704910b8dca') },
          { fieldName: 'type', name: this.$t('crm.components.3e73772af6548690e21b78500e4d1a65') },
          { fieldName: 'timeLine', name: this.$t('crm.components.43b1543513e10e211b35b9e36a042f09') }
        ],
        // 任务
        11: [
          { fieldName: 'name', name: this.$t('crm.components.ff0546ac57ff8dfc3610d5dc75bfc09a'), type: 'task' },
          { fieldName: 'ownerUser', name: this.$t('crm.components.b03e3ad763388e43a39d9348a550f5fc') },
          { fieldName: 'timeLine', name: this.$t('crm.components.4fc35b5724a1a9d4f8c65e8757ca3289') },
          { fieldName: 'tasks', name: this.$t('crm.components.2097b138395640b601128d4862bd1f8c'), type: 'task', disabled: true }
        ],
        // 发邮件
        12: [],
        // 回款计划
        14: [
          { fieldName: 'name', name: this.$t('crm.components.94d7acf9408b47eef3d968605646a77e'), type: 'receivablesPlan' },
          { fieldName: 'num', name: this.$t('crm.components.6d226122be15ac5e05e9a5e76f83b756'), type: 'contract', idField: 'contractId' },
          { fieldName: 'money', name: this.$t('crm.components.a32a7b15b52e581b7a8dd44c076ff329') },
          { fieldName: 'returnTime', name: this.$t('crm.components.ce8c68bf95ba1bf1680aa27187dbdb36') }
        ],
        // 发票
        18: [
          { fieldName: 'name', name: this.$t('crm.components.919f11de36be9d8ef48d3f500c1966e1'), type: 'invoice' },
          { fieldName: 'money', name: this.$t('crm.components.0d1e11c4d5557e5aa79c7b5353536577') },
          { fieldName: 'contractName', name: this.$t('crm.components.3af616da48a321862857ff4f385d5fed'), type: 'contract', idField: 'contractId' },
          { fieldName: 'invoiceDate', name: this.$t('crm.components.9966ed3088f4c7f72fd3313adb5ff9c5') }
        ],
        // 回访
        17: [
          { fieldName: 'name', name: this.$t('crm.components.17d6d0d145cd3d73df9c422461fed8bd'), type: 'visit' },
          { fieldName: 'visitTime', name: this.$t('crm.components.a42e1a32cf31d5baafa319625c9d1234') },
          { fieldName: 'contractName', name: this.$t('crm.components.4bc9e46ca592d84bef533e9355176f42'), type: 'contract', idField: 'contractId' },
          { fieldName: 'satisficing', name: this.$t('crm.components.30b1a96cab4e68de9c17cfd89ebb19ed') }
        ]
      }
    }
  },
  computed: {
    contentData() {
      return this.itemData.content || {}
    }
  },
  methods: {
    getBgColor(status) {
      const color = this.getStatusColor(status)
      return convertHexByOpacity(color, 0.2)
    },

    /**
     * 判断字段是否展示
     * @param field
     * @return {boolean}
     */
    getShow(field) {
      if (field.fieldName === 'timeLine') {
        // 不展示起止时间  2 请假审批 4 加班审批  activityType  OA 审批
        if (this.itemData.activityType === 9) {
          return this.contentData.type == 2 || this.contentData.type == 4
        }
        return true
      }
      return this.contentData.hasOwnProperty(field.fieldName)
    },

    /**
     * 获取字段名
     * @param field
     * @return {*}
     */
    getLabel(field) {
      if (
        this.itemData.activityType === 9 &&
        field.fieldName === 'content'
      ) {
        // type 审批类型 1 普通审批 2 请假审批 3 出差审批 4 加班审批 5 差旅报销 6 借款申请 0 自定义审批
        return {
          1: this.$t('crm.components.26f7e2469612e868dc8932d9d0747191'),
          2: this.$t('crm.components.db9a813dc940e8eac7823940c532a050'),
          3: this.$t('crm.components.df32a87b49ffc908579f58af88ce2e15'),
          4: this.$t('crm.components.36e7177e29af976d2238f1c6019aee32'),
          5: this.$t('crm.components.4ffe75dc1135ae29b4e473ee465c542e'),
          6: this.$t('crm.components.7bce95adcc5629da8713991d1a12dbc8'),
          0: this.$t('crm.components.7e62a15108f97ecc7d58dea5cd39ea21')
        }[this.contentData.type] || ''
      }

      if (['money'].includes(field.fieldName)) {
        return field.name + `（${this.$unit('crm')}）`
      }

      return field.name
    },

    /**
     * 获取字段值
     * @param field
     * @return {string|*}
     */
    getContent(field) {
      if (
        field.fieldName === 'timeLine' &&
        (
          this.contentData.hasOwnProperty('startTime') ||
          this.contentData.hasOwnProperty('endTime')
        )
      ) {
        return `${this.contentData.startTime || ''}~${this.contentData.endTime || ''}`
      }

      if (
        this.itemData.activityType === 9 &&
        field.fieldName === 'type'
      ) {
        return {
          1: this.$t('crm.components.67f7b6de399ec659a7c9da883669058b'),
          2: this.$t('crm.components.ff2b2fce36891b487bfd984e0d952f4e'),
          3: this.$t('crm.components.5012ebb0dc27eca2c9880680c9ce3520'),
          4: this.$t('crm.components.f17f10e691fff170cd515d943d5a5fd7'),
          5: this.$t('crm.components.c3662e6f4c7a342b38c65a297f8ce4b4'),
          6: this.$t('crm.components.924571ca52dcdd23cbe0731a44c5b9fa'),
          0: this.$t('crm.components.f03a93c9baf009cc7b40eaf2b841eee1')
        }[this.contentData.type]
      }

      if ([
        'tasks'
      ].includes(field.fieldName)) {
        return (this.contentData[field.fieldName] || []).map(item => item.name).join('、')
      }

      if ([
        'products'
      ].includes(field.fieldName)) {
        return this.contentData[field.fieldName] || []
      }

      if (field.fieldName === 'ownerUser') {
        const userData = this.contentData[field.fieldName]
        return isObject(userData) ? userData.realname : ''
      }

      if (['money'].includes(field.fieldName)) {
        return this.$money('crm', this.contentData[field.fieldName])
      }

      return this.contentData[field.fieldName]
    },

    /**
     * 点击查看详情
     */
    handleClick(type, id = null) {
      if (!type) return
      this.$emit('detail', type, id || this.itemData.activityTypeId)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-item {
  .row-item {
    margin-bottom: 3px;
    line-height: 1.5;
    color: $--color-n200;

    .special {
      color: $--color-primary;
      cursor: pointer;
    }

    .examine-status {
      margin-left: 10px;
    }
  }
}
</style>
